<template>
  <el-form-item
    :prop="prop"
    :label="label">
    <el-select
      v-model="value"
      :placeholder="placeholder || '请选择'"
      :clearable="clearable"
      :disabled="disabled"
      :filterable="filterable"
      :no-data-text="noDataText"
      @blur="handleBlur"
      @focus="handleFocus"
      @change="handleChange"
      @visible-change="handleVisibleChange"
      @clear="handleClear"
    >
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="item[1]"
        :value="item[0]">
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script setup lang="ts" name="BaseSelect">
import { computed } from 'vue'
let props = withDefaults(defineProps<{
    prop?: string,
    label?: string,
    placeholder?: string,
    clearable?: boolean,
    disabled?: boolean,
    filterable?: boolean,
    modelValue: any,
    noDataText?: string,
    options: any[]
  }>(), {
    modelValue: '',
    noDataText: '暂无数据'
  })
let emits = defineEmits(['visible-change', 'blur', 'change', 'clear', 'focus', 'update:modelValue'])

const value = computed({ // 重新定义
  get: () => props.modelValue,
  set: (value: string) => emits("update:modelValue", value),
})

// 失焦时间
function handleBlur (event: FocusEvent) {
  emits('blur', event)
}
// 获得焦点事件
function handleFocus (event: FocusEvent) {
  emits('focus', event)
}
// 内容改变事件
function handleChange (val: string) {
  emits('change', val)
}

// 下拉框显示隐藏事件
function handleVisibleChange (val: boolean) {
  emits('visible-change', val)
}

// 清除内容事件
function handleClear () {
  emits('clear', '')
}

</script>

<style lang="less" scoped>
:deep(.el-select){
  width: 100%;
}
</style>
